﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>龙腾礼包/个旅金卡余额查询</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var sWidth = $("#bannner").width(); //获取焦点图的宽度（显示面积）
	var len = $("#bannner ul li").length; //获取焦点图个数
	var index = 0;
	var picTimer;
	
	//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++) {
		btn += "<span></span>";
	}
	btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	$("#bannner").append(btn);
	$("#bannner .btnBg").css("opacity",0.5);

	//为小按钮添加鼠标滑入事件，以显示相应的内容
	$("#bannner .btn span").css("opacity",0.4).mouseenter(function() {
		index = $("#bannner .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");

	//上一页、下一页按钮透明度处理
	$("#bannner .preNext").css("opacity",0.2).hover(function() {
		$(this).stop(true,false).animate({"opacity":"0.5"},263);
	},function() {
		$(this).stop(true,false).animate({"opacity":"0.2"},263);
	});

	//上一页按钮
	$("#bannner .pre").click(function() {
		index -= 1;
		if(index == -1) {index = len - 1;}
		showPics(index);
	});

	//下一页按钮
	$("#bannner .next").click(function() {
		index += 1;
		if(index == len) {index = 0;}
		showPics(index);
	});

	//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
	$("#bannner ul").css("width",sWidth * (len));
	
	//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	$("#bannner").hover(function() {
		clearInterval(picTimer);
	},function() {
		picTimer = setInterval(function() {
			showPics(index);
			index++;
			if(index == len) {index = 0;}
		},4000); //此4000代表自动播放的间隔，单位：毫秒
	}).trigger("mouseleave");
	
	//显示图片函数，根据接收的index值显示相应的内容
	function showPics(index) { //普通切换
		var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
		$("#bannner ul").stop(true,false).animate({"left":nowLeft},263); //通过animate()调整ul元素滚动到计算出的position
		//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
		$("#bannner .btn span").stop(true,false).animate({"opacity":"0.4"},263).eq(index).stop(true,false).animate({"opacity":"1"},263); //为当前的按钮切换到选中的效果
	}
});

</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<div class="wrapper">
<div class="header_lt">
	<div class="detail">
	<!-- header -->
		<div class="header h_lt">
			<div class="arrow fr mr30 mt60"><a class="w_white" href="http://www.lotours.net">返回官网首页</a></div>
		</div>
<!--jiaodian -->
		<div class="mb30" id="bannner">
			<ul>
				<li><a href="#" target="_blank"><img src="images/b1.jpg" alt="" /></a></li>
				<li><a href="#" target="_blank"><img src="images/b2.jpg" alt="" /></a></li>
				<li><a href="#" target="_blank"><img src="images/b3.jpg" alt="" /></a></li>
			</ul>
		</div>
	<!-- content -->
		<div class="content clearfix">
	<!-- left -->
			<div class="chax fl c_lt">
				<h1>龙腾礼包/个旅金卡余额查询</h1>
				<table class="kah">
						<tr>
						  <th width="70">卡号</th>
						  <td width="200"><input type="text" name="textfield" id="textfield" class="inw180"/></td>
						  <td width="90" class="tno wordo">请输入18位卡号</td>
					  </tr>
						<tr>
							<th>证件号码</th>
							<td><input type="text" name="textfield" id="textfield" class="inw180"/></td>
							<td class="tno wordo">请输入有效证件</td>
						</tr>
						<tr>
							<th>验证码</th>
							<td colspan="2"><input type="text" name="textfield" id="textfield" class="inw80 fl"/><img src="images/jcaptcha.jpg" class="fl ml15"/><a class="fl ml20 mt5 wordw" href="#">换一个</a></td>
						</tr>
						<tr>
							<th>余额</th>
							<td><input type="text" name="textfield" id="textfield" class="inw80"/></td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<th>&nbsp;</th>
							<td colspan="2" class="wordy bsy">提示:您输入的卡号与证件不符</td>
						</tr>
						<tr>
							<th>&nbsp;</th>
							<td colspan="2" class="s_button"><a href="#">&nbsp;</a></td>
						</tr>
				</table>
				<h2>卡帐信息</h2>
				<table class="xinxi x_lt">
					<tr>
						<th>日期</th>
						<th>金额</th>
						<th>余额</th>
						<th>类型</th>
						<th>备注</th>
					</tr>
					<tr>
						<td>2013-5-30</td>
						<td>59465.23</td>
						<td>2546.65</td>
						<td>购买充值</td>
						<td>新卡充值</td>
					</tr>
					<tr>
						<td>2013-5-30</td>
						<td>59465.23</td>
						<td>2546.65</td>
						<td>购买充值</td>
						<td>新卡充值</td>
					</tr>
					<tr>
						<td>2013-5-30</td>
						<td>59465.23</td>
						<td>2546.65</td>
						<td>购买充值</td>
						<td>新卡充值</td>
					</tr>
					<tr>
						<td>2013-5-30</td>
						<td>59465.23</td>
						<td>2546.65</td>
						<td>购买充值</td>
						<td>新卡充值</td>
					</tr>
					<tr>
						<td>2013-5-30</td>
						<td>59465.23</td>
						<td>2546.65</td>
						<td>购买充值</td>
						<td>新卡充值</td>
					</tr>
				</table>
				<div class="plip_pages_back"><a href="#" title="首页">首页</a><a href="#">1</a><a class="pageson">2</a><a href="#">3</a>....<a href="#" title="尾页">10</a><a href="#" title="末页">末页</a><span>跳转到第<a class="pagesInput"><input type="text" name="custompage"></a>页</span><span><a class="pagego"><input type="button" value="确定"/></a></span></div>
		  </div>
	<!-- right -->
			<div class="wzms fr">
				<h1>龙腾旅游礼包可消费商品及消费方式:</h1>
	<!-- PARENT -->
				<div id="PARENT">
					<ul id="nav" class="clearfix">
						<li><a href="#Menu=ChildMenu1" title="点击查看详情"  onclick="DoMenu('1','ChildMenu1')" class="hidefocus"><i class="sioc2" id="btn1" name="btn"></i>新华旅行网</a>
							<ul id="ChildMenu1" class="expanded clearfix">
								<li>机票、酒店、旅游线路团购；</li>
								<li>&nbsp;</li>
								<li>拨打<font class="wordor mr5 ml5">9507108</font>进行订购；</li>
								<li class="clearfix"><span class="fl">新华旅行网官网：</span><a class="fl awidth" href="http://www.51you.com" target="_blank">www.51you.com</a></li>
							</ul>
						</li>
						<li><a href="#Menu=ChildMenu2" title="点击查看详情" onclick="DoMenu('2','ChildMenu2')" class="hidefocus"><i class="sioc1" id="btn2" name="btn"></i>大新华会展</a>
							<ul id="ChildMenu2" class="collapsed clearfix">
								<li>企业服务：会议服务、商务考察、活动策划、高端定制、奖励旅游、展览承办；</li>
								<li>&nbsp;</li>
								<li>个人服务：高端定制旅游（如宗教、体育、旅游等）</li>
								<li>&nbsp;</li>
								<li><p>联系人：曾子耀</p>
								<p>地址：中国北京朝阳区三元东桥海南航空大厦B座3层</p>
								<p>电话：010-60195207</p>
								<p>手机：13810190950</p>
								<p>邮编：100027</p>
								<p>Zy_zeng@hnair.com</p>
								</li>
							</ul>
						</li>
						<li><a href="#Menu=ChildMenu3" title="点击查看详情" onclick="DoMenu('3','ChildMenu3')" class="hidefocus"><i class="sioc1" id="btn3" name="btn"></i>邮轮游艇公司</a>
							<ul id="ChildMenu3" class="collapsed clearfix">
								<li>邮轮船票;</li>
								<li>&nbsp;</li>
								<li>拨打<font class="wordor mr5 ml5">95071888</font>进行订购；</li>
								<li class="clearfix"><span class="fl">邮轮游艇公司官网 ：</span><a class="fl awidth" href="http://www.hnacruises.com" target="_blank">www.hnacruises.com</a></li>
							</ul>
						</li>
						<li><a href="#Menu=ChildMenu4" title="点击查看详情" onclick="DoMenu('4','ChildMenu4')" class="hidefocus"><i class="sioc1" id="btn4" name="btn"></i>大新华会展</a>
							<ul id="ChildMenu4" class="collapsed clearfix">
								<li>企业服务：会议服务、商务考察、活动策划、高端定制、奖励旅游、展览承办；</li>
								<li>&nbsp;</li>
								<li>个人服务：高端定制旅游（如宗教、体育、旅游等）</li>
								<li>&nbsp;</li>
								<li><p>联系人：曾子耀</p>
								<p>地址：中国北京朝阳区三元东桥海南航空大厦B座3层</p>
								<p>电话：010-60195207</p>
								<p>手机：13810190950</p>
								<p>邮编：100027</p>
								<p>Zy_zeng@hnair.com</p>
								</li>
							</ul>
						</li>
						<li><a href="#Menu=ChildMenu5" title="点击查看详情" onclick="DoMenu('5','ChildMenu5')" class="hidefocus"><i class="sioc1" id="btn5" name="btn"></i>邮轮游艇公司</a>
							<ul id="ChildMenu5" class="collapsed clearfix">
								<li>邮轮船票;</li>
								<li>&nbsp;</li>
								<li>拨打<font class="wordor mr5 ml5">95071888</font>进行订购；</li>
								<li class="clearfix"><span class="fl">邮轮游艇公司官网 ：</span><a class="fl awidth" href="http://www.hnacruises.com" target="_blank">www.hnacruises.com</a></li>
							</ul>
						</li>
						<li><a href="#Menu=ChildMenu6" title="点击查看详情" onclick="DoMenu('6','ChildMenu6')" class="hidefocus"><i class="sioc1" id="btn6" name="btn"></i>大新华会展</a>
							<ul id="ChildMenu6" class="collapsed clearfix">
								<li>企业服务：会议服务、商务考察、活动策划、高端定制、奖励旅游、展览承办；</li>
								<li>&nbsp;</li>
								<li>个人服务：高端定制旅游（如宗教、体育、旅游等）</li>
								<li>&nbsp;</li>
								<li><p>联系人：曾子耀</p>
								<p>地址：中国北京朝阳区三元东桥海南航空大厦B座3层</p>
								<p>电话：010-60195207</p>
								<p>手机：13810190950</p>
								<p>邮编：100027</p>
								<p>Zy_zeng@hnair.com</p>
								</li>
							</ul>
						</li>
						<li><a href="#Menu=ChildMenu7" title="点击查看详情" onclick="DoMenu('7','ChildMenu7')" class="hidefocus"><i class="sioc1" id="btn7" name="btn"></i>邮轮游艇公司</a>
							<ul id="ChildMenu7" class="collapsed clearfix">
								<li>邮轮船票;</li>
								<li>&nbsp;</li>
								<li>拨打<font class="wordor mr5 ml5">95071888</font>进行订购；</li>
								<li class="clearfix"><span class="fl">邮轮游艇公司官网 ：</span><a class="fl awidth" href="http://www.hnacruises.com" target="_blank">www.hnacruises.com</a></li>
							</ul>
						</li>
						<li><a href="#Menu=ChildMenu8" title="点击查看详情" onclick="DoMenu('8','ChildMenu8')" class="hidefocus"><i class="sioc1" id="btn8" name="btn"></i>大新华会展</a>
							<ul id="ChildMenu8" class="collapsed clearfix">
								<li>企业服务：会议服务、商务考察、活动策划、高端定制、奖励旅游、展览承办；</li>
								<li>&nbsp;</li>
								<li>个人服务：高端定制旅游（如宗教、体育、旅游等）</li>
								<li>&nbsp;</li>
								<li><p>联系人：曾子耀</p>
								<p>地址：中国北京朝阳区三元东桥海南航空大厦B座3层</p>
								<p>电话：010-60195207</p>
								<p>手机：13810190950</p>
								<p>邮编：100027</p>
								<p>Zy_zeng@hnair.com</p>
								</li>
							</ul>
						</li>
					</ul>
				</div>
<script type=text/javascript><!--
var LastLeftID = "";
function menuFix() {
 var obj = document.getElementById("nav").getElementsByTagName("li");
 
 for (var i=0; i<obj.length; i++) {
  obj[i].onmouseover=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseDown=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseUp=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
  }
 }
}
function DoMenu(n,emid)
{
 var obj = document.getElementById(emid); 
 var doms=['btn1','btn2','btn3','btn4','btn5','btn6','btn7','btn8'];
 //alert(obj.className.indexOf("expanded"));
 if(obj.className.indexOf("expanded")!=-1){

 	// for(var i=0;i<doms.length;i++ ){
 	// 	doms[i].className="sioc2";
 	// }
 	document.getElementById("btn"+n).className="sioc1";

 	obj.className="collapsed";
 }else{
 	document.getElementById("ChildMenu1").className="collapsed";
 	obj.className="expanded";
 	for(var i=0;i<doms.length;i++ ){
 		document.getElementById(doms[i]).className="sioc1";
 	}
 	document.getElementById("btn"+n).className="sioc2";
 }
 //obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
 if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
 {
  document.getElementById(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
}
function GetMenuID()
{
 var MenuID="";
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 
 if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
 {
  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
 }
 else
 {
  _paramStr = "";
 }
 
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("&");
  if (_paramArr.length>0)
  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length>0)
   {
    MenuID = _paramKeyVal[1];
   }
  }
  /*
  if (_paramArr.length>0)
  {
   var _arr = new Array(_paramArr.length);
  }
  
  //取所有#后面的，菜单只需用到Menu
  //for (var i = 0; i < _paramArr.length; i++)
  {
   var _paramKeyVal = _paramArr[i].split('=');
   
   if (_paramKeyVal.length>0)
   {
    _arr[_paramKeyVal[0]] = _paramKeyVal[1];
   }  
  }
  */
 }
 
 if(MenuID!="")
 {
  DoMenu(MenuID)
 }
}
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
--></script>	
			</div>
		</div>
	<!-- footer -->
		<div class="footer f_lt"></div>
	</div>
</div>
</div>
</form>
</body>
</html>
